<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>会议邀请邮件预览</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main class="container">
        <h1>会议邀请邮件预览</h1>
        <p class="intro">
            在执行 <code>send_invites.py</code> 前，可通过此页面预览每位收件人的个性化邮件效果。
            请加载与脚本相同的收件人 CSV 以及模板文件。
        </p>

        <section class="input-block">
            <label>
                收件人列表（CSV）：
                <input type="file" id="recipientsFile" accept=".csv">
            </label>
            <label>
                主题模板：
                <input type="file" id="subjectFile" accept=".txt">
            </label>
            <label>
                正文模板：
                <input type="file" id="bodyFile" accept=".txt">
            </label>
            <label>
                组织者显示名称（用于 {organizer_name}）：
                <input type="text" id="organizerName" value="会议组织者">
            </label>
            <button id="loadButton">加载文件</button>
        </section>

        <section id="status" class="status-block">
            <p>尚未加载任何文件。</p>
        </section>

        <section id="preview" class="hidden">
            <h2>预览</h2>
            <label>
                选择收件人：
                <select id="recipientSelect"></select>
            </label>
            <div class="preview-card">
                <h3>主题</h3>
                <pre id="subjectPreview"></pre>
                <h3>正文</h3>
                <pre id="bodyPreview"></pre>
            </div>
        </section>
    </main>
    <script src="app.js"></script>
</body>
</html>
